<template>
  <div id="app">
    <router-view />
    <el-button @click="handleSocket">测试webaocket</el-button>
  </div>
</template>
<script>
import fetch from './utils/request'
// 函数
// {}
// []

// 指针 -> [] {}   拷贝
// 指针 -> func return -> 新指针
// 必包 -> 函数作用域 内部可以访问外部
// 构造函数
import axios from 'axios'
import Cookie from 'js-cookie'
export default {
  data() {
    return {
      list: [],
    }
  },
  async created() {
    const res = await axios.get('/api/cache')
    console.log('res:', JSON.parse(JSON.stringify(res.data.data)))
    this.list = res.data.data
    // console.log('list', JSON.parse(this.list))

    // let str =
    //   '{"id":1,"username":"朱元璋","password":"2575b967ee9242e22a27eba2c738cd57","nickname":"zcb","gender":1,"avatar":"1.png","createTime":"2022-05-25T02:11:34.000Z"}'
    // console.log(JSON.parse(str))
  },
  mounted() {},

  methods: {
    handleSocket() {
      // emit 发送给后端数据
      this.$socket.emit('chat', { code: 0, msg: '你好，我是前端-devin' })
    },
  },
  // sockets
  sockets: {
    //这里的意思就是把socket挂载到vue的this上,
    //让每个页面都可以通过this.$socket去调用插件里面的方法
    connect: function () {
      console.log('连接上')
    },
    // res: function (val) {
    //   console.log('接收到', val)
    // },
    send_data: function (val) {
      console.log('接收到------------v:', val)
    },
    hi: function (val) {
      console.log('接收到hi===>', val)
    },
    // my_msg: function (val) {
    //   console.log('接收到my_msg', val)
    // },
  },
}
</script>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
